<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>TaoLerCMS</title>
	<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
	<link rel="stylesheet" href="/static/admin/css/other/login.css" />
	<link rel="stylesheet" href="/static/admin/css/variables.css" />
	<script>if (window.self != window.top) { top.location.reload();}</script>
</head>

<body>
	<div class="login-page" style="background-image: url(/static/admin/images/background.svg)">
		<div class="layui-row">
			<div class="layui-col-sm6 login-bg layui-hide-xs">
				<img class="login-bg-img" src="/static/admin/images/banner.png" alt="" />
			</div>
			<div class="layui-col-sm6 layui-col-xs12 login-form">
				<div class="layui-form">
					<div class="form-center">
						<div class="form-center-box">
							<div class="top-log-title">
								<img class="top-log" src="/static/admin/images/logo.png" alt="" />
								<span>TaoLer Admin 3.0</span>
							</div>
							<div class="top-desc">
								简单迅速 持续更新 安全可靠
							</div>
							<div style="margin-top: 30px;">
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-username"></i>
										</div>
										<input name="username" lay-verify="required" placeholder="账户" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-password"></i>
										</div>
										<input type="password" name="password" value=""
											lay-verify="required|confirmPassword" placeholder="密码" autocomplete="off"
											class="layui-input" lay-affix="eye">
									</div>
								</div>
								<div class="tab-log-verification">
									<div class="verification-text">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-auz"></i>
											</div>
											<input name="captcha" lay-verify="required" value="" placeholder="验证码" autocomplete="off" class="layui-input">
										</div>
									</div>
									<img src="{:captcha_src()}" alt="" class="verification-img"  id="captcha"/>
								</div>
								<div class="layui-form-item">
									<div class="remember-passsword">
										<div class="remember-cehcked">
											<input type="checkbox" name="remember" lay-skin="primary" title="自动登录">
										</div>
									</div>
								</div>
								<div class="login-btn">
									<button type="button" lay-submit lay-filter="login" class="layui-btn login" id="login-submit">登 录</button>
								</div>
								<div class="other-login">
									<div class="other-login-methods">
										其他方式
									</div>
									<div class="greenText"><a href="{:url('login/register')}">注册账号</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 资 源 引 入 -->
	<script src="/static/layui/layui.js"></script>
	<script src="/static/component/pear/pear.js"></script>
	<script>
		layui.use(['form', 'button', 'popup'], function () {
			var form = layui.form;
			var button = layui.button;
			var popup = layui.popup;
			
			let $ = layui.jquery;
			let $body = $('body');

			//回车登陆
			$(document).keydown(function(e){
				if(e.keyCode == 13){
					$("#login-submit").click()
				}
			})

			// 登 录 提 交
			form.on('submit(login)', function (data) {

				/// 验证

				/// 登录
				$.ajax({
					type: "post"
					,url: "{:url('login/index')}" //实际使用请改成服务端真实接口
					,data: data.field
					,success: function(res){
						if(res.code === 0){
								
							//动画
							button.load({
								elem: '.login',
								time: 1500,
								done: function () {
									popup.success("登录成功", function () {
										//登入成功的提示与跳转
										location.href = "{:url('index/index')}"
									});
								}
							})

						} else {
							layer.open({title:'登陆失败', content:res.msg, icon:5, anim:6});
							layui.jquery('#captcha').attr('src', '{:captcha_src()}?' + Math.random());
							}

						}
				});
				
				return false;
			});

			//更换图形验证码
			$body.on('click', '#captcha', function(){
				this.src = '/captcha.html?t='+ new Date().getTime()
			});

		})
	</script>
</body>

</html>
